<template>
  <view class="group-page">
    <view class="follow" @click="handleFollow">
      <u-button :text="followText" :color="activeColor"></u-button>
    </view>
    <view class="main">
      <view class="nothing" v-if="list.length === 0">暂无相关信息...</view>
      <v-list :list="list" :is-other="true" @handleLike="handleLike" />
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../util/base64'
import Material from '../../api/material'
import List from '@/sub_main/material/components/MaterialList'

import { goLogin } from '../../util/platform'

const materialModel = new Material()
export default {
  components: {
    'v-list': List
  },
  onLoad(options) {
    this.id = options.id
    uni.setNavigationBarTitle({
      title: '发现'
    })
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  onShow() {
    this.init()
    this.getInfo()
    this.getList()
  },
  onHide() {
    // 一定要处理
    this.init()
  },
  // 加载更多,分页
  onReachBottom() {
    this.getList(true)
  },
  computed: {
    followText() {
      return this.follow ? '取消关注' : '关注'
    }
  },
  data() {
    return {
      activeColor: color.main_color,
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      },
      list: [],
      id: 0,
      user: {},
      follow: false,
    }
  },
  methods: {
    init() {
      this.queryList = {
        page: 0,
        pageSize: 20,
        busy: false
      }
      this.list = []
      this.total = 0
    },
    // 作者与关注
    getInfo() {
      materialModel.materialUser({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.user = data.user
        this.follow = data.has
        uni.setNavigationBarTitle({
          title: this.user.nickname
        })
      })
    },
    // 关注
    handleFollow() {
      const follow = +(!this.follow)
      materialModel.follow({ id: this.id, follow }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
        this.follow = !this.follow
      })
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        uni.showLoading({
          title: '加载中...'
        })
        materialModel.otherList({
          ...this.queryList,
          id: this.id
        }).then(response => {
          uni.hideLoading()
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          this.total = data.quantity
          // console.log(this.list.map(x => x.id))
          console.log(this.list)
          uni.stopPullDownRefresh();
        }).finally(() => {
          uni.hideLoading()
        })
      }
    },
    // 点赞
    handleLike(item) {
      const has_like = !item.has_like
      this.list.forEach(x => {
        if (x.id === item.id) {
          this.$set(x, 'has_like', has_like)
          if (has_like) {
            this.$set(x, 'like', item.like + 1)
          } else {
            if (item.like >= 1) {
              this.$set(x, 'like', item.like - 1)
            }
          }
        }
      })
      materialModel.saveLike({ ...item }).then(() => {
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  //font-size: 24rpx;
  padding: 20rpx 0;
  .nothing {
    color: #999999;
    font-size: 24rpx;
    //background: white;
    margin: 20rpx;
  }
}
.group-page {
  min-height: 100vh;
  background: #f3f5f7;
  //padding-bottom: 50px;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
.follow {
  margin: 20rpx;
}
</style>
